<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        父子传值
        1.父向子    通过属性
        2.子向父    通过事件
     -->
    <div id="app">
        <h1>子向父传值：{{msg}}</h1>
        <my-demo biaoqing = '(*^_^*)' @myevent = "handleEvent"></my-demo>
    </div>
</body>
<script src="https://cn.vuejs.org/js/vue.js"></script>
<script>
    Vue.component("my-demo",{
        props:{
            biaoqing:String
        },
        data:function(){
            return {
                title:localStorage.getItem('title'),
                search:window.location.search.split("?")[1].split("=")[1],
            }
        },
        template:`
            <div>
                <h1>演示组件之间通信的方式 父子传值</h1>
                <h1>
                    {{biaoqing}}
                    <!-- 3. 子组件中的传值事件 -->
                    <button @click="handleClick">向父传值</button>
                </h1>
            </div>
        `,
        methods : {
            handleClick:function() {
                this.$emit("myevent","肀");
            }
        } 
    });
    let vm = new Vue({
        el : "#app",
        data : {
            msg:'',

        },
        methods: {
            handleEvent:function(msg) {
                this.msg = msg
            }
        }





    });
</script>
</html>